<template>
  <div style="background-color: white; width: 100%; height: 100%">
    <van-nav-bar
        title="我的收藏"
        right-text=""
        left-arrow
        @click-left="onClickLeft"
    />      <van-result v-if="flag"
                        type="fail"
                        title="暂无数据"
                        class="result"
                        style="margin-top: 400px; font-size: 20px"/>
    <div v-for="(car, index) in cars" :key="index" class="car-item">

      <div class="car-info-container" :style="boxStyle(car.imageUrl)">
        <img @click.stop="shoucang(car.carId,car.isFavorite)"  v-if="car.isFavorite==0"  style="margin-top: 0px; margin-left: 120px; width: 20px;height: 20px" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/Lovenull.png?e=1737255146&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:yu6Xduz8_A_ENt0AbJ5R2nvPYgk=">
        <img @click.stop="shoucang(car.carId,car.isFavorite)"  v-if="car.isFavorite==1" style="position: relative; margin-top: 0px; margin-left: 120px; width: 20px;height: 20px" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/love.png?e=1737255201&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:aJpokByV4d5CkHa9XvtnnFkLDkU=">
<!--        <div class="favorite-icon">-->
<!--&lt;!&ndash;          <van-icon name="like-o" style="margin-top: 9px; margin-right: 1px" size="15px" />&ndash;&gt;-->
<!--          -->
<!--        </div>-->
<!--        <img :src="car.imageUrl" alt="" class="car-image">-->
      </div>
      <div class="car-details">
        <van-rate v-model="value" :count="1" color="#FFCD1A" style="float: left;margin-left: 20px" />
        <span class="rating-text">4.4({{car.rating}}评价)</span>
        <span class="car-name">{{car.carName}}</span>
        <div class="car-stats">
          <span class="stat-item">
<!--            <svg t="1737025502221" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3878" width="12" height="12">-->
<!--&lt;!&ndash;              <path d="M629.333333 330.666667h10.666667a117.333333 117.333333 0 0 1 117.333333 117.333333v330.666667a42.666667 42.666667 0 1 0 85.333334 0V277.333333a53.333333 53.333333 0 0 1 - 29.354667 - 97.877333L768 106.666667l22.613333 - 22.613334 116.053334 116.032V778.666667a106.666667 106.666667 0 0 1 - 213.333334 0V448a53.333333 53.333333 0 0 0 - 53.333333 - 53.333333h - 10.666667v512H682.666667v64H85.333333v - 64h53.333334V170.666667A117.333333 117.333333 0 0 1 256 53.333333h256A117.333333 117.333333 0 0 1 629.333333 170.666667v160z m - 64 576V170.666667A53.333333 53.333333 0 0 0 512 117.333333H256A53.333333 53.333333 0 0 0 202.666667 170.666667v736h362.666666z m - 298.666666 - 704h234.666666v192h - 234.666666v - 192z m64 64v64h106.666666v - 64h - 106.666666zM256 768h256v64H256v - 64z" fill="#979797" p-id="3879"></path>&ndash;&gt;-->
<!--            </svg>-->
            {{car.fuelLevel}}%油量
          </span>
          <span class="stat-item">
<!--            <svg t="1737025502221" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3878" width="12" height="12">-->
<!--&lt;!&ndash;              <path d="M629.333333 330.666667h10.666667a117.333333 117.333333 0 0 1 117.333333 117.333333v330.666667a42.666667 42.666667 0 1 0 85.333334 0V277.333333a53.333333 53.333333 0 0 1 - 29.354667 - 97.877333L768 106.666667l22.613333 - 22.613334 116.053334 116.032V778.666667a106.666667 106.666667 0 0 1 - 213.333334 0V448a53.333333 53.333333 0 0 0 - 53.333333 - 53.333333h - 10.666667v512H682.666667v64H85.333333v - 64h53.333334V170.666667A117.333333 117.333333 0 0 1 256 53.333333h256A117.333333 117.333333 0 0 1 629.333333 170.666667v160z m - 64 576V170.666667A53.333333 53.333333 0 0 0 512 117.333333H256A53.333333 53.333333 0 0 0 202.666667 170.666667v736h362.666666z m - 298.666666 - 704h234.666666v192h - 234.666666v - 192z m64 64v64h106.666666v - 64h - 106.666666zM256 768h256v64H256v - 64z" fill="#979797" p-id="3879"></path>&ndash;&gt;-->
<!--            </svg>-->
            1.3公里
          </span>
        </div>
        <div class="price-info">
          <span class="price">￥{{car.pricePerHour}}</span>
          <span class="price-unit">/小时</span>
        </div>
      </div>

    </div>
  </div>
  <!--    提示-->

</template>

<script>
export default {
  data() {
    return {
      value: 1,
      userId: '',
      cars: [],
      flag:false
    };
  },
  methods: {
    boxStyle(url) {
      return {
        'background-image': `url(${url})`,
        'background-size': '100%', // 可以根据需要设置其他的背景属性，如背景大小、位置等
        'background-position': 'center',
        'background-repeat': 'no-repeat'
      };
    },
    shoucang(carId,isFavorite){
      console.log("收藏"+carId,isFavorite)
      if (isFavorite == 0) {
        const cars = {
          carId:carId,
          isFavorite:1,
          userId:this.user.userId
        }
        this.axios.put('http://localhost:10086/api/cars/cars/updateCar',cars).then(res=>{
          this.findAll()
          // location.reload();
        })
      }else {
        const cars = {
          carId:carId,
          isFavorite:0,
          userId:this.user.userId
        }
        this.axios.put('http://localhost:10086/api/cars/cars/updateCar',cars).then(res=>{
          this.findAll()
          // location.reload();
        })
      }



    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      // 根据实际需求实现该方法
    },
    findAll() {
      this.axios.get(`http://localhost:10086/api/order/favorites/CollectionDetails/${this.user.userId}`)
          .then(response => {
            if (response.data.code === 200) {
              if (response.data.data.length == 0){
                const data = response.data.data
                this.flag = data.length === 0;
              }
              this.cars = response.data.data;
            }else {

              this.flag = true;
            }
          })
    },
  },
  created() {
    const user = localStorage.getItem('currentUser');
    if (user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({ name: 'login' });
          },
          1000
      )
    }
    this.user = JSON.parse(user);
    console.log(this.user)
    this.findAll();
  }
};
</script>

<style scoped>
.car-item {
         width: 31%;
         height: 250px;
         margin-left: 5%;
         margin-top: 40px;
         float: left;
       }

.car-info-container {
                width: 147px;
                height: 100px;
                background-color: #F5F7FF;
                border-radius: 5px;
                //position: relative;
              }

.favorite-icon {
              width: 30px;
              height: 30px;
              background-color: white;
              border-radius: 30px;
              position: absolute;
              top: 18px;
              left: 115px;
            }

.car-image {
         width: 150px;
         height: 78px;
         margin-top: 27px;
       }

.car-details {
         margin-top: 10px;
       }

.rating-text {
            color: #FFCD1A;
            font-size: 13px;
            margin-left: -54px;
          }

.car-name {
         display: block;
         height: 30px;
         width: 120px;
         float: left;
         margin-top: 5px;
         margin-right: 40px;
       }

.car-stats {
         float: left;
         height: 20px;
         width: 170px;

         margin-left: 10px;
         margin-top: 5px;
       }

.stat-item {
          color: #868686;
          font-size: 10px;
          margin-right: 20px;
        }

.price-info {
           width: 170px;
           height: 20px;
           margin-left: 10px;
           float: left;
           margin-top: 5px;
         }

.price {
  float: left;
  margin-left: 10px;
}

.price-unit {
           float: left;
           font-size: 12px;
           color: #868686;
           margin-top: 5px;
           margin-left: 5px;
         }
</style>